extends simplelayout
doctype html
block content

    html(lang='zh-CN')
        head
            meta(charset='utf-8')
            link(rel='icon', href='https://static.jianshukeji.com/highcharts/images/favicon.ico')
            meta(name="viewport" content="width=device-width, initial-scale=1")


    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')
    script(src='/javascripts/jquery-1.11.0.min.js')

    script(src='/javascripts/highcharts.js')
    script(src='/javascripts/highcharts-more.js')
    script(src='/javascripts/xrange.js')
    script(src='/javascripts/exporting.js')
    script(src='/javascripts/series-label.js')

    link(rel='shortcut icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')


    div(style="width: 1000px; margin: 50px 200px;")

        ul(id="position")

    body
        div(style='height:800px;min-width: 300px;max-width: 1500px;margin: 1em auto;', id="labchart")



    script(type='text/javascript').
        function search_graph_lab(Term1) {
            $.ajax({
                url: "/search/graph_lab/list",
                type: "POST",
                data: {term: Term1},

                success: function (data) {

                    if (data == '') {
                        alert("No or lack of relevant data!" + "\n" + "Click to close the message box.");
                    } else {
                        var item = [];
                        var distinctItemId = [];
                        var distinctLabel = [];
                        var id = [];
                        var label = [];
                        var charttime = [];
                        var value = [];
                        var seriesArr = [];

                        for (var i = 0; i < data.length; i++) {
                            id.push(data[i].ITEM_ID);
                            label.push(data[i].LABEL);
                            charttime.push(data[i].CHARTTIME);
                            value.push(data[i].VALUE);

                            if (!item[data[i].ITEMID]) {
                                distinctItemId.push(data[i].ITEMID);
                                distinctLabel.push(data[i].LABEL);
                                item[data[i].ITEMID] = true;
                            }
                        }


                        for (var j = 0; j < distinctItemId.length; j++) {
                            var labTestData = [];
                            var k = 0;
                            for (var r = 0; r < data.length; r++) {
                                if (data[r].ITEMID == distinctItemId[j]) {
                                    labTestData[k] = {
                                        x: Date.UTC(chGMT(data[r].CHARTTIME).slice(0, 4), chGMT(data[r].CHARTTIME).slice(5, 7) - 1, chGMT(data[r].CHARTTIME).slice(8, 10), chGMT(data[r].CHARTTIME).slice(11, 13), chGMT(data[r].CHARTTIME).slice(14, 16), chGMT(data[r].CHARTTIME).slice(17, 19)),
                                        y: Number(data[r].VALUE),
                                        unit: data[r].VALUEUOM,
                                        flag: data[r].FLAG
                                    }
                                    k++;
                                }
                            }

                            if (j < 10) {
                                seriesArr.push({
                                    name: distinctLabel[j],
                                    data: labTestData,
                                    color: Highcharts.getOptions().colors[j],
                                    visible: true
                                });
                            } else {
                                seriesArr.push({
                                    name: distinctLabel[j],
                                    data: labTestData,
                                    color: Highcharts.getOptions().colors[j],
                                    visible: false
                                });
                            }
                        }
                        //////////// LAB TEST DATA ////////////
                        //Synchronous zoom effect
                        function syncExtremes(e) {
                            var thisChart = this.chart;
                            if (e.trigger !== 'syncExtremes') {
                                Highcharts.each(Highcharts.charts, function (chart) {
                                    if (chart !== thisChart) {
                                        if (chart.xAxis[0].setExtremes) {
                                            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {trigger: 'syncExtremes'});
                                        }
                                    }
                                });
                            }
                        }

                        Highcharts.chart('labchart', {
                            chart: {
                                type: 'spline',
                                marginLeft: 150,
                                zoomType: 'xy',
                                panning: true,
                                panKey: 'ctrl'
                            },
                            title: {
                                text: 'LAB TEST-HADMID: ' + Term1
                            },
                            subtitle: {
                                text: 'Drag to select the zoom area; Press ctrl to pan the chart left or right; Click on the legend to hide or resume display.'
                            },
                            xAxis: {
                                type: 'datetime',
                                events: {
                                    setExtremes: syncExtremes
                                },
                                title: {
                                    text: 'Time In Hospital'
                                }
                            },
                            yAxis: [{
                                title: {
                                    text: 'Value'
                                },
                                tickInterval: 1
                            }],
                            tooltip: {
                                headerFormat: '<b>Item:{series.name}</b><br>',
                                pointFormat: '<b>Result:</b>{point.y} {point.unit}<br><b>Flag:</b>{point.flag}<br>{point.x:%A,%b.%e,%Y,%H:%M:%S}',
                                positioner: function () {
                                    return {x: this.chart.chartWidth - this.label.width - 1, y: 0};//x: this.chart.chartWidth - this.label.width 表示right aligned；y: -1 表示align to title
                                },
                                crosshairs: [{
                                    width: 1,
                                    color: "#006cee",
                                    dashStyle: 'longdashdot'
                                }, {
                                    width: 1,
                                    color: "#006cee",
                                    dashStyle: 'longdashdot'
                                }]
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'middle'
                            },
                            plotOptions: {
                                series: {
                                    label: {
                                        connectorAllowed: false
                                    }
                                },
                                spline: {
                                    marker: {
                                        enabled: true
                                    }
                                }
                            },
                            series: seriesArr
                        });
                    }
                }
            })
        }

        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }

        function chGMT(gmtDate) {
            return gmtDate;
        }
        
        window.onload = function () {
            search_graph_lab();
        }
